<template>
  <div>
    <h1>$attrs和$listeners说明</h1>
    <div>
      <p>$attrs接收除已经在组件的props外所有的绑定在组件上的属性。在组件内通过: this.$attrs.xxx 获取属性。如果组件内有子组件，并希望将attrs的数据传入，可以在子组件上通过： v-bind="$attrs"，然后子组件可同样通过: this.$attrs.xxx获取属性</p>
      <p>$listeners接收所有v-on绑定在组件上的方法。在组件内通过：this.$listeners.xxFn 获取方法。如果组件内有子组件，并希望子组件继承这些方法，可在子组件上绑定：v-on="$listeners"，然后子组件可同样通过：this.$listeners.xxFn 获取方法。 </p>
    </div>
    <h1>demo：</h1>
    <Son :name="name" :age="age" :obj="obj" @do="todo"></Son>
  </div>
</template>

<script>
  import Son from './Son'
  export default {
    name: "attrs",
    components: { Son },
    data() {
      return {
        name: '父级传入的name',
        age: '父级传入的age',
        obj: {
          a: '父级传入的obj.a'
        }
      }
    },
    methods: {
      todo() {
        alert('父级的todo')
      }
    }
  }
</script>

<style scoped>

</style>
